<template>
	<!-- 商品列表页面 -->
	<view class="container">
		<view class="item">
			<!-- 左侧图片 -->
			<view class="item_left">
				<img v-bind:src="goods.goods_small_logo || defaultPic" alt="">
			</view>
			<!-- 右侧文字 -->
			<view class="item_right">
				<text class="right_one">{{ goods.goods_name }}</text>
				<text class="right_two">{{ goods.goods_price | keepTwo }}  ￥</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-goods",
		data() {
			return {
				// 默认的空图片
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
			};
		},
		// 自定义属性
		props: {
			goods: { // 商品列表数据
				type: Object,
				default: {}
			}
		},
		// 过滤器
		filters: {
			// 使用过滤器处理价格
			keepTwo(value) {
				 return parseFloat(value).toFixed(2);
			}
		}
	}
</script>

<style lang="scss">
	// 商品列表页面样式
	.container {
		padding: 6px 9px;
		.item {
			display: flex;
			padding: 0 0 8px;
			background-color: #F5F5F5;
		}
	}
	
	// 左侧图片
	.item_left {
		
		img {
			display: block;
			width: 100px;
			height: 100px;
			border-radius: 15px;
		}
	}
	// 右侧文字
	.item_right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 8px;
				.right_one {
					font-size: 12px;
					font-weight: 500;
				}
				.right_two {
					font-size: 14px;
					font-weight: 600;
					color: orangered;
				}
	}

</style>